.related_env_vars {
  display: flex;
  width: 500px;
  height: 244px;
  padding: 12px;
  background: var(--background-color-secondary);
  box-shadow: 0px 14px 30px rgba(0, 0, 0, 0.5);
  border-radius: var(--border-radius-default);
  position: fixed;
  top: 400px;
  left: 400px;
  z-index: 101;
  text-align: left;

  .env_vars-list {
    width: 250px;
    height: 100%;
    overflow-y: auto;
    border-right: solid 1px rgba(0, 0, 0, 0.06);
  }

  .env_vars-default {
    display: flex;
    align-items: center;
    position: relative;
    width: 227px;
    height: 28px;
    color: var(--content-color-secondary);
    padding: 0 8px;
    border-radius: 3px;

    &:hover,
    &.active {
      background: var(--highlight-background-color-secondary);

      .default-icon {
        display: block;
      }

      .env_vars-desc {
        display: block;
      }
    }

    .default-name {
      width: 167px;
    }

    .default-icon {
      display: none;
      width: 12px;
      height: 12px;
      line-height: 12px;
      text-align: center;
      margin: 0 0 0 8px;
      background: var(--log-blue);
      border-radius: 3px;
    }

    .default-type {
      width: 18px;
      height: 18px;
      margin: 0 10px 0 0;
      line-height: 18px;
      text-align: center;
      border-radius: 3px;
      color: var(--font-1)fff;
      background: var(--log-blue);

      &.e {
        background: var(--run-green);
      }
    }
  }

  .env_vars-desc {
    flex: 1;
    padding: 0 12px;
    line-height: 20px;
    font-size: var(--size-12px);
    left: 240px;
    top: 0;
    color: var(--content-color-secondary);
    overflow: hidden;
    overflow-y: auto;

    .desc-title {
      color: var(--font-2);
    }
  }
}